import { useStore, useStoreType } from "@/zustand/store";
import style from "./index.module.scss";
import {
  UserOutlined,
  SignatureOutlined,
  VideoCameraOutlined,
  LoginOutlined,
} from "@ant-design/icons";
import Link from "next/link";
import { useRouter } from "next/navigation";
interface IPersonalDetailsProps {
  userName: string;
}
export default function PersonalDetails(props: IPersonalDetailsProps) {
  const { userName } = props;
  const router = useRouter();
  const setLoginOut = useStore((state: useStoreType) => state.setLoginOut);
  const detailsDate = [
    {
      key: "userName",
      title: <h3 style={{ textAlign: "center" }}>{userName}</h3>,
      link: "#",
    },
    {
      key: "perCenter",
      icon: <UserOutlined />,
      title: "个人中心",
      link: "/PersonalCenter",
    },
    {
      key: "myCourse",
      icon: <VideoCameraOutlined />,
      title: "我的编程课程",
      link: "/PersonalCourse",
    },
    {
      key: "blog",
      icon: <SignatureOutlined />,
      title: "我的编程讨论",
      link: "/PersonalPost",
    },
    {
      key: "loginOut",
      icon: <LoginOutlined />,
      title: "退出登录",
      link: "/Login",
    },
  ];
  const handleLoginOut = () => {
    setLoginOut();
    router.push("/");
  };
  return (
    <div className={style["personalDetailsContainer"]}>
      {detailsDate.map((item) => {
        return (
          <div className={style["personalDetailsContent"]} key={item.key}>
            {item.key !== "loginOut" ? (
              <Link href={item.link} style={{ width: "100%" }}>
                {item.key === "userName" ? (
                  item.title
                ) : (
                  <div className={style["item"]}>
                    <span style={{ marginRight: "8px" }}>{item.icon}</span>
                    <span> {item.title}</span>
                  </div>
                )}
              </Link>
            ) : (
              <div
                className={style["item"]}
                key={item.key}
                onClick={handleLoginOut}
              >
                <span style={{ marginRight: "8px" }}>{item.icon}</span>
                <span> {item.title}</span>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}
